<section class="content-header">
    <h1>
        <?php echo $this->_lang['user_management_title']; ?>
        <small>Welcome</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="./"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li class="active"><i class="fa fa-user"></i> <?php echo $this->_lang['user_management_title']; ?></li>
    </ol>
</section>

<!-- Main content -->
<section class="content">
    <div class="nav-tabs-custom">
        <!-- Tabs within a box -->
        <ul class="nav nav-tabs">
            <li class="active"><a href="#manage-users" data-toggle="tab"><?php echo $this->_lang['user_management_title']; ?></a></li>
            <li><a href="#roles" data-toggle="tab"><?php echo $this->_lang['role_management_title']; ?></a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="manage-users" style="position: relative;">
            	<div style="padding:5px 0;margin-bottom:10px;"><a href="javascript:;" id="newUser" class="btn btn-primary"><i class="fa fa-plus"></i> <?php echo $this->_lang['new_user']; ?></a></div>
                <p class="menuHeader"><?php echo $this->_lang['user_management_msg']; ?></p>
                  <table class="display" id="user-tbl">
                  <thead>
                    <tr>
                        <th>User ID</th>
                        <th>Username</th>
                        <th>Name</th>
                        <th>Email</th>
                    </tr>
                  </thead>
                  <tbody>
                  <?php
                  $users = $this->getUsers();
                  foreach($users as $u) {
                    ?>
                    <tr>
                        <td><?php echo $u['id'];?></td>
                        <td><a id="<?php echo $u['id']; ?>" class="userEditBtn"><?php echo $u['username'];?></a></td>
                        <td><?php echo $u['fullname'];?></td>
                        <td><?php echo $u['email'];?></td>
                    </tr>
                    <?php  
                  }
                      ?>
                      </tbody>
                  </table>
                <script type="text/javascript">
                    $('#newUser').click(function() {
                        Etomite.editUser();
                    });
                    $('.userEditBtn').click(function() {
                        Etomite.editUser($(this).attr('id'));
                    });
                    oTable = $('#user-tbl').dataTable({
                            "bJQueryUI": true,
                            "sPaginationType": "full_numbers"
                        });
                </script>
            </div><!-- end users -->
            
            <div class="tab-pane" id="roles" style="position: relative;">
            	<div style="padding:5px 0;margin-bottom:10px;"><a href="javascript:;" id="newRole" class="btn btn-primary"><i class="fa fa-plus"></i> New Role</a></div>
                <p class="menuHeader"><?php echo $this->_lang['role_management_msg']; ?></p>
                <table class="display" id="row-tbl">
                  <thead>
                    <tr>
                        <th>Role ID</th>
                        <th>Role</th>
                        <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                <?php
                  $sql = "select name, id, description from ".$this->db."user_roles order by name";
                  $rs = $this->dbQuery($sql);
                  $limit = $this->recordCount($rs);
                      
                      for($i=0; $i<$limit; $i++) {
                        $row = $this->fetchRow($rs);
                        ?>
                        <tr>
                      <?php
                        if($row['id']==1) {
                      ?>
                      <td><?php echo $row['id'];?></td>
                      <td><i><?php echo $row['name']; ?></i></td>
                      <td><i><?php echo $this->_lang['administrator_role_message']; ?></i></td>
                      <?php
                        } else {
                      ?>
                        <td><?php echo $row['id'];?></td>
                        <td><a id="<?php echo $row['id'];?>" class="editRoleBtn"><?php echo $row['name']; ?></a></td>
                        <td><?php echo $row['description']; ?></td>
                      <?php
                        }
                        ?>
                        </tr>
                      <?php
                      }
                      ?>
                   </tbody>
                 </table>
                <script type="text/javascript">
                    $('#newRole').click(function() {
                        Etomite.editRole();
                    });
                    $('.editRoleBtn').click(function() {
                        Etomite.editRole($(this).attr('id'));
                    });
                    roTable = $('#row-tbl').dataTable({
                            "bJQueryUI": true,
                            "sPaginationType": "full_numbers"
                        });
                </script>
            </div>
        </div>
    </div><!-- /.nav-tabs-custom -->
</section>